/*
 * 归档页面样式文件 - Archives Page Styles
 * 定义归档页面的时间线、分类展示、响应式设计等样式
 */

.headerImage {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.headerImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waveOverlay {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V7.23C0,65.52,268.63,112.77,600,112.77S1200,65.52,1200,7.23V0Z' fill='%23f5f5f5'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.6' fill='%23f5f5f5'%3E%3C/path%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.3' fill='%23f5f5f5'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 64px);
  background-color: #f5f5f5;
}

.loadingContainer,
.errorContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 100%;
}

.mainContent {
  display: flex;
  gap: 24px;
  transition: all 0.5s ease;
}

.archiveContent {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
  transition: all 0.5s ease-out;
  will-change: flex, width;
}

.archiveHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.timeline {
  position: relative;
}

.yearCollapse {
  background: transparent;
  border: none;
}

.yearPanel {
  margin-bottom: 8px;
  border-radius: 0;
  overflow: hidden;
  background-color: transparent;
  border: none;
}

.yearHeader {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  padding: 12px 0;
  background-color: transparent;
  border-bottom: none;
  line-height: 1.5;
}

/* 全局样式覆盖 */
:global {
  .ant-collapse-expand-icon {
    display: flex;
    align-items: center;
    height: 100%;
    margin-top: 0 !important;
  }
  
  .ant-collapse-borderless > .ant-collapse-item {
    border-bottom: none;
  }
}

.yearTitle {
  margin-right: 12px;
  font-weight: bold;
  font-size: 20px;
  color: #1890ff;
}

.yearCount {
  margin-left: auto;
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

.monthCollapse {
  background: transparent;
  border: none;
  margin-top: 8px;
}

.monthPanel {
  margin-bottom: 12px;
  margin-left: 16px;
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
  border: none;
}

.monthHeader {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 500;
  background-color: transparent;
  transition: all 0.3s ease;
  line-height: 1.5;
}

.monthHeader:hover {
  color: #52c41a;
}

.monthIcon {
  margin-right: 8px;
  color: #52c41a;
}

.monthTitle {
  margin-right: 12px;
  color: #333;
  transition: color 0.3s ease;
  font-size: 18px;
}

.monthHeader:hover .monthTitle {
  color: #52c41a;
}

.monthCount {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

.postsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}

.postCard {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  border: 1px solid #e8e8e8;
}

.postCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 10%);
}

.postCardContent {
  display: flex;
  height: 100%;
}

.postInfo {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.postTitle {
  margin-bottom: 8px !important;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.postCard:hover .postTitle {
  color: #ff85c0;
}

.postMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 8px;
}

.postContentPreview {
  margin-top: auto;
  overflow: hidden;
}

.postSummary {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 0 !important;
}

.postImageContainer {
  width: 40%;
  position: relative;
  overflow: hidden;
}

.postImage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 40% 0);
}

.postCard:hover .postContentPreview {
  height: auto;
  max-height: 80px;
  transition: max-height 0.3s ease;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.postPreview {
  position: sticky;
  top: 64px; /* 顶栏高度 */
  width: 500px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
  max-height: calc(100vh - 88px); /* 顶栏高度 + 一些间距 */
  overflow-y: auto;
  animation: expandFromCard 0.3s ease-out;
  transform-origin: left center;
}

@keyframes expandFromCard {
  from {
    opacity: 0;
    transform: scale(0.5) translateX(-20%);
    width: 300px;
  }

  to {
    opacity: 1;
    transform: scale(1) translateX(0);
    width: 500px;
  }
}

.postPreviewClosing {
  animation: shrinkToCard 0.3s ease-in;
  transform-origin: left center;
}

@keyframes shrinkToCard {
  from {
    opacity: 1;
    transform: scale(1) translateX(0);
    width: 500px;
  }

  to {
    opacity: 0;
    transform: scale(0.5) translateX(-20%);
    width: 300px;
  }
}

.previewHeader, .previewContent {
  opacity: 0;
  animation: fadeInContent 0.2s ease-out 0.3s forwards;
}

@keyframes fadeInContent {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.postPreviewClosing .previewHeader,
.postPreviewClosing .previewContent {
  animation: none;
  opacity: 0;
}

.previewHeader {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.closeButton {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: rgba(0, 0, 0, 45%);
  transition: color 0.3s;
}

.closeButton:hover {
  color: rgba(0, 0, 0, 85%);
}

.previewContent {
  font-size: 16px;
  line-height: 1.6;
  padding: 24px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.previewContent h1,
.previewContent h2,
.previewContent h3,
.previewContent h4,
.previewContent h5,
.previewContent h6 {
  margin: 24px 0 16px;
  color: #262626;
  font-weight: 600;
}

.previewContent p {
  margin: 16px 0;
  text-align: justify;
  line-height: 1.8;
}

.previewContent img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.previewActions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 95%);
  backdrop-filter: blur(10px);
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #f0f0f0;
}

.goToDetailButton {
  min-width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 30%);
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.goToDetailButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 40%);
}

.goToDetailButton:active {
  transform: translateY(0);
}

.goToDetailButton .anticon {
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .sidebar {
    width: 250px;
  }
  
  .postPreview {
    width: 450px;
  }
}

@media (max-width: 992px) {
  .mainContent {
    flex-direction: column;
  }
  
  .sidebar,
  .postPreview {
    width: 100%;
  }
  
  .withPreview .archiveContent {
    display: none;
  }
}

@media (max-width: 768px) {
  .postsGrid {
    grid-template-columns: 1fr;
  }
  
  .archiveHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}